<template>
  <div class="Articlefl maincon">
    <!-- 搜索 -->
    <el-card shadow="hover" class="topsearch">
      <el-row>
        <el-form :inline="true" ref="types" :model="types">
          <el-form-item label="年龄筛选">
            <el-select
                size="small"
                style="width: 100%"
                v-model="types.tid"
                placeholder="请选择所属年龄段"
                @change="changtype(types.tid)"
            >
              <el-option
                  v-for="(item, index) in types"
                  :key="index"
                  :label="item.agetext"
                  :value="item.tid"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜谱搜索">
            <el-input
                size="small"
                v-model="name"
                placeholder="输入菜谱标题"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getAll"
            >搜索</el-button
            >
            <el-button size="small" icon="el-icon-refresh" @click="resetForm"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
    <!-- table -->
    <el-card shadow="hover" class="treetable">
      <el-table
          v-loading="loading"
          element-loading-text="耗尽脑汁加载中"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="name" label="标题" width="150">
        </el-table-column>
        <el-table-column label="描述" align="content" >
          <template slot-scope="scope">
            <el-button type="primary" plain @click="view(scope.row.content)">详细内容</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="发布人"> </el-table-column>
        <el-table-column prop="time" label="添加时间"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="warning" plain @click="handleEdit(scope.row)">编辑<i class="el-icon-edit" ></i></el-button>
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
            >
              <el-button type="danger" plain style="margin-left: 10px" slot="reference">删除<i class="el-icon-close"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <div style="padding: 10px 0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>


    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="80%"
    >
      <el-form label-width="80px"   ref="form" :model="form">
        <el-form-item label="菜谱标题" >
          <el-input v-model="form.name" ></el-input>
        </el-form-item>
        <el-form-item label="菜谱概述" >
          <el-input v-model="form.summary" ></el-input>
        </el-form-item>
        <el-form-item label="年龄段" >
          <el-select v-model="form.tid" placeholder="请选择">
            <el-option
                v-for="item in  types"
                :key="item.id"
                :label="item.agetext"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜谱内容" >
          <mavon-editor ref="md" style="height: 100%" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="beOfficial">设为官方推荐</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog
        title="提示"
        :visible.sync="dialogVisible2"
        width="25%"
    >
      <div style="text-align: center">您确定将此菜谱设为官方推荐吗？</div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSave2">确 定</el-button>
  </span>
    </el-dialog>


    <!--    文章预览框-->
    <el-dialog title="菜谱预览" :visible.sync="viewDialogVis" width="60%" >
      <el-card>
        <div>
          <mavon-editor
              class="md"
              :value="content"
              :subfield="false"
              :defaultOpen="'preview'"
              :toolbarsFlag="false"
              :editable="false"
              :scrollStyle="true"
              :ishljs="true"
              index
          />
        </div>
      </el-card>
    </el-dialog>
  </div>
  <!--  预览窗口-->
</template>

<script>
import request from "@/router/request";

export default {
  name: "food1",
  data(){
    return{
      form:{},
      name:"",
      cover:0,
      total:0,
      pageNum:1,
      pageSize:5,
      viewDialogVis: false,
      dialogVisible: false,
      dialogVisible2: false,
      types:{},
      tableData: [],
    }
  },
  created() {
    this.typeText()
    this.getAll()
  },
  methods:{
    //加载年龄标签
    typeText(){
      request.get("/type").then(res=>{
        this.types=res.data
      })
    },
    //根据type的id查询文章
    changtype(tid){
      request.get("/article/pageCoverSreach",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          tid: tid,
          cover:this.cover
        }
      }).then(res=>{
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    //查询所有
    getAll(){
      request.get("/article/pageCoverSreach",{
        params:{
          pageNum: this.pageNum,
          pageSize:this.pageSize,
          name:this.name,
          cover:this.cover
        }
      }).then(res=>{
        this.tableData=res.data.records
        this.total = res.data.total
        this.typeText()
      })
    },
    //查看详情
    view(content) {
      console.log(content)
      this.content = content
      this.viewDialogVis = true
    },
    // 重置
    resetForm() {
      this.name = null;
      this.getAll()
    },

    //修改弹窗
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row)),//赋予数据
          console.log("获取到的数据为："+this.form)
      this.dialogVisible = true//打开
    },

    //设为官方文档
    beOfficial(){
     this.dialogVisible2=true
    },

    handleSave2(){
      const form=this.form
      form.cover=3
      request.put("/article",form).then(res =>{
        console.log(res)
        if(res){
          this.$message.success("设置成功！")
        }else{
          this.$message.error("设置失败！")
        }
            this.dialogVisible = false,
            this.dialogVisible2= false,
            this.form = {}
        this.getAll()
      })
    },

    handleSave(){
      const form = this.form
      request.put("/article",form).then(res =>{
        console.log(res)
        if(res){
          this.$message.success("保存成功！")
        }else{
          this.$message.error("保存失败！")
        }
        this.dialogVisible = false,
            this.form = {}
        this.getAll()
      })
    },

    //图片上传时修改上传的路径
    imgAdd(pos, $file) {
      let $vm = this.$refs.md
      // 第一步.将图片上传到服务器.
      const formData = new FormData();
      formData.append('file', $file);
      request({
        url: '/files/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'},
      }).then((res) => {
        // 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
        $vm.$img2Url(pos, res.data);
      })
    },
    //删除
    handleDelete(id){
      request.delete("/article/"+id).then(res =>{
        if(res){
          this.$message.success("删除成功！")
        }else{
          this.$message.error("删除失败！")
        }
        this.getAll()
      })
    },

    //分页
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      //之后请求数据
      this.getAll()
    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.getAll()
    },
  },
}
</script>

<style lang='scss' scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.Articlefl {
  .topsearch {
    height: 15%;
    .el-form-item {
      // margin-bottom: 0;
    }
  }
  .treetable {
    margin-top: 20px;
    height: calc(100% - 15% - 20px);
    // max-height: calc(90% - 20px);
    overflow-y: auto;
    // padding-bottom: 50px;

    ::v-deep .el-table .myNoteBox .cell {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
    }

    .clearfix {
      span {
        font-weight: bold;
      }
    }
  }

  ::v-deep .el-dialog__wrapper {
    .el-dialog {
      .el-dialog__body {
        .el-form {
          .el-form-item {
            .el-form-item__content {
              .quill-editor {
                .ql-container {
                  height: 200px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
